<template>
  <div>
    <el-card>
      <el-row type="flex">
        <!-- 顶部 -->
        <!-- 左 -->
        <el-col>
          <el-button type="primary" size="small" @click="isShowDialog=true">添加客户</el-button>
        </el-col>
        <!-- 右 -->
        <el-col>
          <el-row type="flex">
            <el-select v-model="agentSelect">
              <el-option
                label="全部经纪"
                value=""
              />
              <el-option
                v-for="item in agentsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-input v-model="nameInput" placeholder="请输入关键字" />
            <el-button @click="submitSearch">筛选</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        border
        :data="clientsList"
        style="width: 100%"
        @close="closeFn"
      >
        <el-table-column
          prop="image"
          label="图片"
          width="180"
        >
          <template v-slot="{row}">
            <img class="tableImg" :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          label="电话"
        />
        <el-table-column
          prop="wechat"
          label="微信"
        />
        <el-table-column
          prop="agent.name"
          label="经纪"
        />
        <el-table-column
          prop="desc"
          label="介绍"
        />
        <el-table-column
          label="操作"
        >
          <template v-slot="{row}">
            <el-col>
              <el-row type="flex">
                <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
              </el-row>
            </el-col>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageConfig._limit"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>

    </el-card>
    <!-- 弹窗 -->
    <el-dialog title="新增客户" :visible.sync="isShowDialog" @close="closeFn">
      <el-form ref="form" :rules="rules" :model="formData">
        <el-form-item label="经纪:" prop="agent" label-width="10%">
          <el-select v-model="formData.agent">
            <el-option
              v-for="item in agentsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名:" prop="name" label-width="10%">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="邮箱:" prop="email" label-width="10%">
          <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item label="电话:" prop="phone" label-width="10%">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="微信:" prop="wechat" label-width="10%">
          <el-input v-model="formData.wechat" />
        </el-form-item>
        <el-form-item label="描述:" prop="desc" label-width="10%">
          <el-input v-model="formData.desc" />
        </el-form-item>
        <el-form-item label="封面:" prop="image" label-width="10%">
          <!-- 插入上传组件 -->
          <ImageUpLoad ref="imgUpLoad" />

        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <template #footer>
        <el-button type="primary" size="small" @click="submitForm">确定</el-button>
        <el-button size="small" @click="closeFn">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getClientsList, addClientsList, delClientsList, editClientsList, getClientsDetail, getClientPage } from '@/api/clients'
import { getAgentsList } from '@/api/agents'
export default {
  data() {
    return {
      // 弹窗显示
      isShowDialog: false,
      // 客户列表
      clientsList: [],
      // 经纪列表
      agentsList: [],

      // 表格表单
      formData: {
        'agent': '', // 属于哪个经纪的 id 值
        'name': '', // 名称
        'email': '', // 电子邮箱，比如 example@qq.com
        'phone': '', // 电话
        'wechat': '', // 微信
        'desc': '', // 描述
        'image': '' // 图片
      },

      // 效验表单
      // formData: {
      //   agent: '',
      //   name: '',
      //   email: '',
      //   phone: '',
      //   wechat: '',
      //   desc: '',
      //   image: ''
      // },

      rules: {
        agent: [
          { required: true, message: '请输入对应信息', trigger: 'blur' }
        ],
        name: [

          { required: true, message: '请输入对应信息', trigger: 'blur' }

        ],
        email: [
          { required: true, message: '请输入对应信息', trigger: 'blur' }

        ],
        phone: [
          { required: true, message: '请输入对应信息', trigger: 'blur' }

        ],
        wechat: [
          { required: true, message: '请输入对应信息', trigger: 'blur' }

          // { required: true, message: '请输入对应信息', trigger: 'blur' }

        ],
        // email: [
        //   { required: true, message: '请输入对应信息', trigger: 'blur' }

        // ],
        // phone: [
        //   { required: true, message: '请输入对应信息', trigger: 'blur' }

        // ],
        // wechat: [
        //   { required: true, message: '请输入对应信息', trigger: 'blur' }

        // ],
        desc: [
          { required: true, message: '请输入对应信息', trigger: 'blur' }
        ]

      },

      // 分页参数
      pageConfig: {
        _limit: 5,
        _start: 0
        // title_contains: ''
      },
      // 页码
      page: 1,
      total: 0,

      // 筛选
      nameInput: '',
      // 经纪公司
      agentSelect: ''
    }
  },
  created() {
    // 渲染 获取客户
    this.getClientsList()
    this.getAgentsList()
    //  分页
    this.getClientPage()
  },
  methods: {
    // 搜索栏
    async submitSearch() {
      // 发请求拿数据
      // 分页功能
      // 获取数据
      const { data } = await getClientsList({
        _limit: this.pageConfig._limit,
        // 获取数据带上用户搜索条件

        name_contains: this.nameInput || null,
        // 搜索选择经纪公司
        agent: this.agentSelect || null

        // name_contains: this.nameInput || null,
        // // 选择经纪公司
        // agent: this.agentSelect || null

      })
      this.clientsList = data
      // 获取数量
      this.getClientPage()
    },

    // 获取客户列表
    async getClientsList() {
      const { data } = await getClientsList({
        ...this.pageConfig,
        // 获取数据带上用户搜索条件

        name_contains: this.nameInput || null,
        // 搜索选择经纪公司
        agent: this.agentSelect || null

        // name_contains: this.nameInput || null,
        // // 选择经纪公司
        // agent: this.agentSelect || null

      })
      this.clientsList = data
      // console.log('客户', data)
    },
    // 获取分页数量
    async getClientPage() {
      const { data } = await getClientPage({
        name_contains: this.nameInput || null,
        agent: this.agentSelect || null
      })
      this.total = data
    },
    // 获取经纪列表
    async getAgentsList() {
      const { data } = await getAgentsList()
      this.agentsList = data
      // console.log('经纪', data)
    },
    // 用户点击的页面
    currentChange(newPage) {
      this.page = newPage
      this.pageConfig._start = (this.page - 1) * this.pageConfig._limit
      console.log(123, this.pageConfig)
      // 获取数据
      this.getClientsList()
    },

    // 新增客户
    async submitForm() {
      // 表单效验
      this.$refs.form.validate()

      // console.log(this.formData.id);

      // console.log(this.formData.id)

      if (this.formData.id) {
        // 调接口，实现编辑
        // console.log('编辑');
        await editClientsList({
          ...this.formData,
          image: this.$refs.imgUpLoad.fileList[0].url
        })

        // 更新页面
        this.getClientsList()
        //
      } else {
      // 用户新增 传参给后台

        await addClientsList({
          ...this.formData,
          image: this.$refs.imgUpLoad.fileList[0].url

        })
        // console.log(279, image)

        await addClientsList({
          ...this.formData,
          image: this.$refs.imgUpLoad.fileList[0].url

        })
      }
      // 头像没有上传完成或为空
      if (this.$refs.imgUpLoad.fileList.length === 0) {
        this.$message.error('请上传头像')
        return
      }
      // 提示用户
      this.$message.success('提交成功')
      // 关闭弹窗
      this.isShowDialog = false
      // 更新页面
      this.getClientsList()
    },

    // 编辑客户
    async editFn(id) {
      // console.log(123)
      // 作用域插槽获取id
      // 发送请求，回显表单
      const res = await getClientsDetail(id)

      // console.log(266,res);

      // console.log(266, res)

      this.formData = res.data
      // console.log(165, this.formData)
      // 弹窗
      this.isShowDialog = true
      // 等待页面渲染，弹窗，插入图片
      this.$nextTick(() => {
        // 回显头像处理
        this.$refs.imgUpLoad.fileList = [{ url: this.formData.image }]
        console.log(307, this.$refs.imgUpLoad)
      })
    },
    // 关闭
    closeFn() {
      // console.log('关闭窗口')
      // 清空数据
      this.formData = {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      }
      // 清空效验规则
      this.$refs.form.resetFields()
      // 关闭弹窗
      this.isShowDialog = false
    },
    // 删除客户
    delFn(id) {
      this.$confirm('是否确定删除', '提示', {
        type: 'warning'
      }).then(async() => {
        await delClientsList(id)
        // 更新页面
        this.getClientsList()
      }).catch(err => {
        console.log('操作有误', err)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  .el-table{
    margin-top: 20px;
  }
  .tableImg{
    width: 150px;
    height: 150px;
  }

</style>
